<script setup>
import {InsertShopCate, GetShopCateList, DeleteCate} from "@/api/shopCate"
import dayjs from "dayjs"
import {ElMessage, ElMessageBox} from 'element-plus'
import {ref} from "vue"

const params = ref({
  page: 1,
  pageSize: 10,
  keywords: undefined
})

const data = ref([])
const total = ref(0)
const getData = async () => {
  try {
    const res = await GetShopCateList(params.value)
    data.value = res.records
    total.value = res.total
  } catch (e) {
  }
}
getData()

// 编辑或新增事件
const EditHandler = (row = {}) => {
  ElMessageBox.prompt("请输入需要"+ (row.id ? "编辑" : "新增")+"的分类标题", row.id ? "编辑" : "新增", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    inputPattern: /^.{1,16}$/,
    inputValue: row.id ? row.title : "",
    inputErrorMessage: "请输入1-16位的字母、数字、下划线、中划线",
  }).then(async ({value}) => {
    let insertParams = {...row}
    insertParams.title = value
    console.log(insertParams)
    await InsertShopCate(insertParams)
    ElMessage.success(`${row.id ? "编辑" : "新增"}完成`)
    await getData()
  }).catch(() => {
  })
}

// 删除事件
const DelHandler = async (row) => {
  try {
    await DeleteCate(row.id)
    await getData()
    ElMessage.success("删除完成")
  }catch(e){}
}

const handleSizeChange = (size) => {
  params.value.pageSize = size
  getData()
}

const handleCurrentChange = (page) => {
  params.value.page = page
  getData()
}
</script>

<template>
  <el-card>
    <div class="mb-[20px] flex justify-between">
      <div class="w-[22%] flex">
        <el-input placeholder="请搜索关键字" v-model="params.keywords" clearable @clear="getData"></el-input>
        <el-button type="success" class="ml-[10px]" @click="getData">查询</el-button>
      </div>
      <el-button type="primary" @click="EditHandler">新增</el-button>
    </div>
    <el-table :data="data" border stripe>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="创建时间">
        <template #default="{row}">
          {{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column label="更新时间">
        <template #default="{row}">
          {{ dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="primary" size="small" @click="EditHandler(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="DelHandler(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-[10px] flex justify-end">
      <el-pagination
          v-model:currentPage="params.page"
          v-model:page-size="params.pageSize"
          :page-sizes="[5,10, 20, 30, 40]"
          size="small"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<style scoped lang="scss">

</style>
